﻿@page "/scheduler/working-days"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.DropDowns
@inherits SampleBaseComponent;

<SampleDescription>
   <p>  This demo showcases how to set customized working days as well as first day of a week on Scheduler.</p> 
</SampleDescription>
<ActionDescription>
  <p>In this demo, the working days of a week can be set on Scheduler using the <code>WorkDays</code> property which accepts the collection of day indexes (from 0 to 6) of a week. By default, it is set to <code>[1, 2, 3, 4, 5]</code> and in this demo, it has been set to <code>[1, 3, 5]</code> which means that
   <code>Monday, Wednesday, Friday</code> is being set as working days of a week and is visually differentiated from non-working days. The working hours usually applies only on these given working days. </p>
  <p> The first day of the week can also be set on the Scheduler by using the <code>FirstDayOfWeek</code> property, doing so which will make the Scheduler to start with that day. </p>
  <p><strong>Note: </strong> Here, Sunday is always denoted as 0, Monday as 1 and so on.</p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-CurrentView="@CurrentView" @bind-SelectedDate="@CurrentDate" WorkDays="@WorkingDays" FirstDayOfWeek="@FirstDay">
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
                <ScheduleView MaxEventsPerRow="2" Option="View.Month"></ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id="property" style="width:100%" title="Properties">
                <tbody>
                    <tr style="height: 50px">
                        <td style="width: 30%">
                            <div>
                                Work days
                            </div>
                        </td>
                        <td style="width: 70%;">
                            <div>
                                <SfDropDownList TValue="string" TItem="DropDownData" @bind-Index="@workIndex" DataSource="@WorkDaysData" PopupWidth="auto">
                                    <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="OnChange"></DropDownListEvents>
                                    <DropDownListFieldSettings Text="Name" Value="Value"></DropDownListFieldSettings>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 50px">
                        <td style="width: 30%">
                            <div>
                                First day of week
                            </div>
                        </td>
                        <td style="width: 70%;">
                            <div>
                                <SfDropDownList TValue="string" TItem="DropDownData" @bind-Index="@dayIndex" DataSource="@FirstDayOfWeek" PopupWidth="auto">
                                    <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="OnDayChange"></DropDownListEvents>
                                    <DropDownListFieldSettings Text="Name" Value="Value"></DropDownListFieldSettings>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{
    private int? workIndex {get;set;} = 0;
    private int? dayIndex {get;set;} = 1;
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetEmployeeEventData();
    public View CurrentView = View.WorkWeek;
    public DateTime CurrentDate = new DateTime(2020, 1, 16);
    public int[] WorkingDays = new int[] { 1, 3, 5 };
    public int FirstDay = 1;
    public void OnChange(ChangeEventArgs<string, DropDownData> args)
    {
        var numbers = (args.Value).Split(',').Select(Int32.Parse).ToArray();
        this.WorkingDays = numbers;
    }
    public void OnDayChange(ChangeEventArgs<string, DropDownData> args)
    {
        this.FirstDay = Convert.ToInt32(args.Value);
    }
    List<DropDownData> WorkDaysData = new List<DropDownData>()
{
        new DropDownData { Name = "Mon, Wed, Fri", Value = "1,3,5" },
        new DropDownData { Name = "Mon, Tue, Wed, Thu, Fri", Value = "1,2,3,4,5" },
        new DropDownData { Name = "Tue, Wed, Thu, Fri", Value = "2,3,4,5" },
        new DropDownData { Name = "Thu, Fri, Sat, Mon, Tue", Value = "4,5,6,1,2" }
    };
    List<DropDownData> FirstDayOfWeek = new List<DropDownData>() {
        new DropDownData { Name = "Sunday", Value = "0" },
        new DropDownData { Name = "Monday", Value = "1" },
        new DropDownData { Name = "Tuesday", Value = "2" },
        new DropDownData { Name = "Wednesday", Value = "3" },
        new DropDownData { Name = "Thursday", Value = "4" },
        new DropDownData { Name = "Friday", Value = "5" },
        new DropDownData { Name = "Saturday", Value = "6" }
    };
    public class DropDownData
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }
}